<template>
  <van-row class="applyrefund">
    <van-nav-bar
      fixed
      :z-index="100"
      title="申请退款"
      right-text
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="proInfo" v-for="item in orderInfo" :key="item.id">
      <van-card
        :num="item.productQuantity"
        :price="item.productPrice"
        :title="item.productName"
        :thumb="item.productPic"
      >
        <div slot="tags">
          <van-tag
            plain
            type="danger"
            v-for="(item,index) in JSON.parse(item.productAttr)"
            :key="index"
          >{{item.key}}:{{item.value}}</van-tag>
        </div>
      </van-card>
      <div class="refundStatus">
        <van-cell-group>
          <van-cell
            title="物流状态"
            :value="checkInfoList.confirmStatus == '1'? refundStatusName[0]: refundStatusName[1]"
          />
          <van-cell title="退款原因" value="请选择" :label="selectedReason" is-link @click="selectReason"/>
        </van-cell-group>
      </div>
      <div class="refundStatus">
        <van-cell-group>
          <van-field error label="退款金额" :placeholder="`￥${refundAmount}`" disabled/>
          <van-field v-if="freightAmount > 0" error label="扣除运费" :placeholder="`￥${freightAmount}`" disabled/>
          <div class="refund-num">
            <van-cell title="退货数量">
              <van-stepper
                v-model="refundNum"
                :max="item.productQuantity"
                :disabled="isDisabled"
                @minus="onBlur(refundNum - 1)"
                @plus="onBlur(refundNum + 1)"
                @blur="onBlur(refundNum)"
                />
            </van-cell>
          </div>
          <van-field v-model="refundSpec" label="退款说明" placeholder="必填"/>
        </van-cell-group>
    </div>
    </div>
    <div class="refundStatus">
      <van-cell-group>
        <van-cell title="上传凭证"/>
        <van-cell>
          <van-uploader
            v-model="fileList"
            :max-count="3"
            multiple
            :before-read="beforeRead"
            :preview-image="true"
          />
        </van-cell>
      </van-cell-group>
    </div>
    <van-action-sheet v-model="showReason" :actions="actions" @select="onSelectReason"/>
    <div class="confirm">
      <van-button type="danger" size="large" @click="doSumbit">提交</van-button>
    </div>
  </van-row>
</template>
<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import storeScroller from '@/components/store-scroller'
import storeCard from '@/components/store-card'
import { UUID } from '@/utils/util'
import {
  AddressList,
  Tab,
  Tabs,
  NavBar,
  Card,
  Button,
  Tag,
  Row,
  Toast,
  Icon,
  ActionSheet,
  Cell,
  CellGroup,
  Field,
  Uploader,
  Stepper 
} from 'vant'
Vue.use(NavBar)
  .use(AddressList)
  .use(Tab)
  .use(Tabs)
  .use(Card)
  .use(Button)
  .use(Tag)
  .use(Row)
  .use(Toast)
  .use(Icon)
  .use(ActionSheet)
  .use(Cell)
  .use(CellGroup)
  .use(Field)
  .use(Uploader)
  .use(Stepper)
export default {
  name: 'applyrefund',
  components: {
    storeScroller,
    storeCard
  },
  data() {
    return {
      refundStatusName: ['已收到货', '未收到货'],
      actions: [],
      showReason: false,
      showExpressInfo: [],
      toggleShowName: '展开',
      isHide: true,
      selectedReason: '请选择原因详情',
      reasonId: '',
      refundAmount: 0, // 退款金额
      freightAmount: 0, // 运费
      refundSpec: '',
      refundNum: 0, // 退货数量
      fileList: [],
      isDisabled: true
      // express: {
      //   company: '',
      //   expressNo: ''
      // }
    }
  },
  computed: {
    ...mapState({
      checkInfoList: state => state.order.checkInfoList
    }),
    orderInfo() {
      return this.checkInfoList.orderItemList
    }
  },
  created() {
    this.refundAmount = this.checkInfoList.orderItemList[0].realAmount
    this.freightAmount = this.checkInfoList.orderItemList[0].freightAmount
    this.refundNum = this.checkInfoList.orderItemList[0].productQuantity
    this.getReasonList()
  },
  methods: {
    /*************返回点击事件***************/
    onClickLeft() {
      this.$router.go(-1)
    },
    /*****获取退款原因**** */
    getReasonList() {
      this.$http
        .post('/orderReturnApply/getReasons', {
          orderId: this.orderInfo[0].orderId,
        })
        .then(data => {
          this.actions = data.info
        })
        .catch(error => {
          console.log(error)
        })
    },
    /******** 数量框失焦 获取退款金额 ********/
    onBlur(num) {
      if (!this.reasonId) {
        Toast.fail('请先选择退款原因')
        return
      }
      let orderNum = this.checkInfoList.orderItemList[0].productQuantity
      if (num > orderNum) {
        Toast.fail('退货订单数量不能大于购买数量')
        return
      }
      this.$http.post('/orderReturnApply/confirmReturnApply', {
        orderId: this.orderInfo[0].orderId,
        orderItemId: this.orderInfo[0].id,
        quantity: num,
        reasonId: this.reasonId
      })
      .then((res) => {
        let data = res.info
        this.refundAmount = data.returnAmount
        this.freightAmount = data.freightAmount || 0
      })
    },
    /*************点击弹出原因弹框事件*********/
    selectReason() {
      this.showReason = true
    },

    /************原因选择事件*********/
    onSelectReason(item) {
      this.selectedReason = item.name
      this.reasonId = item.id
      this.showReason = false
      this.isDisabled = false
    },

    /***********上传图片事件*********/

    /***********上传图片之前事件*********/
    beforeRead(file) {
      console.log('beforeRead')
      console.log(file)
      this.$http.post('aliyun/oss/policy', {}).then(data => {
        console.log(data.info)
        let form = new FormData()
        const filename = UUID() + '.' + file.name.split('.')[1]
        form.append('policy', data.info.policy)
        form.append('signature', data.info.signature)
        form.append('key', data.info.dir + '/' + filename)
        form.append('ossaccessKeyId', data.info.accessKeyId)
        form.append('dir', data.info.dir)
        form.append('host', data.info.host)
        form.append('file', file)

        this.$http
          .post('https://store-images-release.oss-cn-hangzhou.aliyuncs.com', form, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then(() => {
            this.fileList.push({
              // url: data.info.host + '/' + data.info.dir + '/' + filename
              url: 'https://static.5gyungou.com/' + data.info.dir + '/' + filename
            })
          })
      })
      return false
    },

    /******提交事件****** */
    doSumbit() {
      if (!this.reasonId) {
        Toast.fail('请选择退款原因')
        return
      } else if (!this.refundSpec) {
        Toast.fail('请填写退款说明')
        return
      }

      const { orderInfo, checkInfoList } = this

      
      // const quantity = orderInfo.reduce((pre, next) => {
      //   return pre + next.productQuantity
      // }, 0)

      

      const params = {
        orderId: orderInfo[0].orderId,
        orderSn: checkInfoList.orderSn,
        orderItemId: orderInfo[0].id,
        quantity: parseInt(this.refundNum),
        receiveStatus: checkInfoList.confirmStatus,
        reasonId: this.reasonId,
        reason: this.selectedReason,
        description: this.refundSpec,
        proofPics: this.fileList
      }

      this.$http
        .post('/orderReturnApply/create', params)
        .then(() => {
          this.$router.push('/afterSale')
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</Script>
<style lang="scss" scoped>
.applyrefund {
  padding-top: 66px;
  display: flex;
  flex-direction: column;
  .proInfo {
    .van-card {
      background: #fff;
    }
  }
  .refundStatus {
    margin-top: 10px;
  }
  .refund-num {
    .van-cell__title{
      width: 90px;
      -webkit-box-flex: initial;
      -webkit-flex: none;
      flex: none;
    }
    .van-cell__value{
      text-align: left;
    }
  }
  .confirm {
    position: fixed;
    width: 100%;
    bottom: 0;
  }
}
</style>
